<!-- 
    头像组件
    头像下各种功能的实现
 -->
<template>
    <div class="header-user">
        <el-dropdown size="default" @command="handleCommand">
            <span class="avatar">
                <el-avatar shape="circle" :size="28" :src="store.user.avatarUrl" />
            </span>
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item :command="0" :icon="UserFilled">个人信息</el-dropdown-item>
                    <el-dropdown-item :command="1" :icon="Unlock" divided>密码修改</el-dropdown-item>
                    <el-dropdown-item :command="2" :icon="Right" divided>退出登录</el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
    </div>
</template>
<script lang="ts" setup>
import { UserFilled, Unlock, Right } from '@element-plus/icons-vue';//图标 
import { useRouter } from "vue-router";//路由函数，进行页面跳转
import { useUserStore } from "@/stores/admin/index";//引入pinia中的状态容器
const router = useRouter()
const store = useUserStore()//实例化pinia中的容器函数
// 触发显示下拉菜单的回调事件
const handleCommand = (e: number) => {
    switch (e) {
        case 0:
            router.push('/index/userinfo')
            break;
        case 1:
            router.push('/index/revisePwd')
            break;
        case 2:
            store.loginOut()
            break;
        default:
            break;
    }
}
</script>
<style lang="less" scoped>
.header-user {
    display: inline-block;
    vertical-align: middle;
    margin: 0px 10px;
}
</style>
